<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			
			<view class="title">我的房源</view>
		</view>
		
		<!-- 房源列表 -->
		<view class="housing-list">
			<!-- 有数据时显示列表 -->
			<view v-if="housingList.length > 0" class="list-content">
				<view 
					class="housing-item" 
					v-for="(item, index) in housingList" 
					:key="index"
				>
					<view class="item-header">
						<text class="housing-id">房源编号：{{ item.unit.unit_number }}</text>
						<text class="housing-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
					</view>
					
					<view class="housing-info">
						<view class="housing-title">{{ item.unit.building }} {{ item.unit.floor }}</view>
						<view class="housing-detail">
							<view class="detail-item">
								<text class="label">面积：</text>
								<text class="value">{{ item.unit.actual_area }} ㎡</text>
							</view>
							<view class="detail-item">
								<text class="label">租金：</text>
								<text class="value price">{{ item.unit.rental_price }} 元/㎡/月</text>
							</view>
							<view class="detail-item">
								<text class="label">物业费：</text>
								<text class="value">{{ item.unit.property_fee_standard }} 元/㎡/月</text>
							</view>
						</view>
					</view>
					
					<view class="contract-info" v-if="item.contract">
						<view class="info-item">
							<text class="label">合同编号：</text>
							<text class="value">{{ item.contract.contract_number }}</text>
						</view>
						<view class="info-item">
							<text class="label">租期：</text>
							<text class="value">{{ item.contract.start_date }} 至 {{ item.contract.end_date }}</text>
						</view>
					</view>
					
					<view class="item-footer">
						<button 
							class="contract-btn" 
							v-if="item.status === '初审通过' && !item.contract"
							@click="fillContract(item)"
						>填写合同</button>
						<button 
							class="detail-btn" 
							@click="viewHousingDetail(item)"
						>查看详情</button>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<image class="empty-image" src="/static/icons/empty.png"></image>
				<text class="empty-text">您暂无租赁的房源</text>
				<button class="add-btn" @click="goToHousingList">去查看房源</button>
			</view>
		</view>
		
		<!-- 租赁申请入口 -->
		<view class="applications-entry" @click="goToApplications">
			<text class="entry-text">我的租赁申请</text>
			<text class="entry-icon">></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				housingList: [],
				userInfo: null
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo()
		},
		onShow() {
			// 每次显示页面时刷新数据
			this.loadMyHousing()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
					this.loadMyHousing()
				} else {
					// 未登录跳转到登录页
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			},
			
			// 加载我的房源
			loadMyHousing() {
				uni.showLoading({
					title: '加载中'
				})
				
				uni.request({
					url: 'http://localhost:8000/api/services/my-housing/',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							this.housingList = res.data.data
						} else {
							uni.showToast({
								title: res.data.message || '获取房源列表失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('获取房源列表失败', err)
						uni.showToast({
							title: '获取房源列表失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 获取状态对应的样式类
			getStatusClass(status) {
				switch (status) {
					case '待初审':
						return 'status-pending'
					case '初审通过':
						return 'status-approved'
					case '待复审':
						return 'status-review'
					case '审核通过':
						return 'status-rented'
					case '审核驳回':
						return 'status-rejected'
					case '已取消':
						return 'status-cancelled'
					default:
						return ''
				}
			},
			
			// 填写合同
			fillContract(item) {
				// 将房源数据存储到本地
				uni.setStorageSync('currentHousingForContract', item)
				
				// 跳转到合同填写页面
				uni.navigateTo({
					url: '/pages/services/housing/contract?id=' + item.application_id
				})
			},
			
			// 查看房源详情
			viewHousingDetail(item) {
				// 将房源数据存储到本地
				uni.setStorageSync('currentMyHousingDetail', item)
				
				// 跳转到详情页
				uni.navigateTo({
					url: '/pages/services/housing/my-housing-detail?id=' + item.application_id
				})
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 跳转到房源列表
			goToHousingList() {
				uni.navigateTo({
					url: '/pages/services/housing/list'
				})
			},
			
			// 跳转到租赁申请列表
			goToApplications() {
				uni.navigateTo({
					url: '/pages/services/housing/applications'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx;
	}
	
	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 100;
	}
	
	.back-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.housing-list {
		padding: 20rpx;
	}
	
	.housing-item {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.housing-id {
		font-size: 26rpx;
		color: #666666;
	}
	
	.housing-status {
		font-size: 26rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.status-pending {
		background-color: #FFF3E0;
		color: #FF9800;
	}
	
	.status-approved {
		background-color: #E8F5E9;
		color: #4CAF50;
	}
	
	.status-review {
		background-color: #E3F2FD;
		color: #2196F3;
	}
	
	.status-rented {
		background-color: #E8EAF6;
		color: #3F51B5;
	}
	
	.status-rejected {
		background-color: #FFEBEE;
		color: #F44336;
	}
	
	.status-cancelled {
		background-color: #F5F5F5;
		color: #9E9E9E;
	}
	
	.housing-info {
		margin-bottom: 20rpx;
	}
	
	.housing-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}
	
	.housing-detail {
		margin-bottom: 20rpx;
	}
	
	.detail-item {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.label {
		color: #666666;
		width: 120rpx;
	}
	
	.value {
		color: #333333;
		flex: 1;
	}
	
	.price {
		color: #FF5722;
		font-weight: bold;
	}
	
	.contract-info {
		background-color: #F8F8F8;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.item-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	
	.contract-btn {
		background-color: #FF9800;
		color: white;
		font-size: 28rpx;
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		margin-right: 20rpx;
	}
	
	.detail-btn {
		background-color: #007AFF;
		color: white;
		font-size: 28rpx;
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		color: #999999;
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}
	
	.add-btn {
		background-color: #007AFF;
		color: white;
		font-size: 28rpx;
		padding: 0 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
	
	.applications-entry {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.entry-text {
		font-size: 32rpx;
		color: #333333;
	}
	
	.entry-icon {
		font-size: 32rpx;
		color: #999999;
	}
</style> 